<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PAYING</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/getParameter.js"></script>
    <script src="vue/vue.min.js"></script>
    <link rel="stylesheet" href="vue/iview.css">
    <script src="vue/iview.min.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div id="indexDemo">
<div class="rg_layout" id="payDemo">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>PAYMENT</p>
        </div>
        <div style="margin-top: 100px;margin-left: 200px">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularity">
                    <div id="app">
                        <table class="table" border="1px" width="600px">
                            <tr>
                                <td>Buyer's Name</td>
                                <td>Total Transaction Amount</td>
                                <td>Date</td>
                                <td>Hour</td>
                            </tr>
                            <a href="javascript:;">
                            <tr v-for="(items,key) in transactionlist">
                                <td> {{items.b_uname}} </td>
                                <td> {{items.total}} </td>
                                <td> {{items.date}} </td>
                                <td> {{items.hour}} </td>
                            </tr>
                            </a>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>

<script type="text/javascript">
    new Vue({
        el: '#indexDemo',
        data() {
            return {
                sellerUsername:'',
                transactionlist: []
            }
        },

        created() {
            $.get("header.html", function (data) {
                $("#header").html(data);
            });
            $.get("footer.html", function (data) {
                $("#footer").html(data);
            });
            let un = getParameter("username");
            let url = 'pay/getTransactionsList';
            $.post(url, {sellerUsername: un}, (resp) => {
                this.transactionlist = resp;
            }, 'json');
        },

        methods: {

        },

        mounted() {
        }
    });
</script>
</html>
